<template>
    <div class="danger-container">
        <div class="danger-page">
            <!-- 面包屑 -->
            <el-breadcrumb separator=">" class="breadcrumb">
                <el-breadcrumb-item>一级分类</el-breadcrumb-item>
                <el-breadcrumb-item>二级分类</el-breadcrumb-item>
            </el-breadcrumb>

            <!-- 标签页 - 改为原型图样式 -->
            <div class="custom-tabs">
                <div
                    v-for="(tab, index) in tabs"
                    :key="index"
                    :class="['tab-item', activeTab === tab.value ? 'active' : '']"
                    @click="handleTabChange(tab.value)"
                >
                    {{ tab.label }}
                </div>
            </div>

            <!-- 筛选表单 -->
            <div class="filter-container">
                <el-form :inline="true" :model="filters" class="filter-form">
                    <el-form-item>
                        <el-select v-model="filters.level" placeholder="隐患级别" class="filter-select">
                            <el-option v-for="opt in options.level" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="filters.source" placeholder="隐患来源" class="filter-select">
                            <el-option v-for="opt in options.source" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="filters.type" placeholder="隐患类型" class="filter-select">
                            <el-option v-for="opt in options.type" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="filters.reporter" placeholder="隐患上报人" class="filter-input" />
                    </el-form-item>
                    <el-form-item>
                        <div class="date-range">
                            <el-date-picker v-model="filters.startDate" type="date" placeholder="上报日期" />
                            <span class="date-sep">~</span>
                            <el-date-picker v-model="filters.endDate" type="date" placeholder="结束日期" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" class="query-btn">查 询</el-button>
                        <el-button @click="reset" class="reset-btn">重 置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 操作按钮组 -->
            <div class="action-bar">
                <el-button type="primary" icon="el-icon-plus" @click="addItem" class="action-btn">
                    <i class="el-icon-plus"></i> 上报隐患
                </el-button>
                <el-button icon="el-icon-edit" class="action-btn">
                    <i class="el-icon-edit"></i> 设置负责人
                </el-button>
                <el-button icon="el-icon-download" class="action-btn">
                    <i class="el-icon-download"></i> 导出
                </el-button>
            </div>

            <!-- 统计信息 -->
            <div class="result-summary">查询结果：共计 {{ list.length }} 条数据</div>

            <!-- 隐患列表 -->
            <div class="hazard-list">
                <div v-for="item in list" :key="item.id" class="hazard-card">
                    <!-- 卡片头部 -->
                    <div class="card-header">
                        <div class="user-info">
                            <el-avatar icon="el-icon-user" class="user-avatar"></el-avatar>
                            <span class="user-name">{{ item.name }}</span>
                            <span class="status-tag" :class="'status-' + item.status">{{ statusText(String(item.status)) }}</span>
                        </div>
                        <div class="time-info">
                            <span class="time-item">上报时间：{{ formatTime(item.startTime) }}</span>
                            <span class="time-item">结束时间：{{ item.endTime || '-' }}</span>
                        </div>
                    </div>

                    <!-- 卡片内容 -->
                    <div class="card-content">
                        <p class="content-item">
                            <span class="item-label">隐患类型：</span>
                            <span class="item-value hazard-type">{{ item.type || '校园三防建设' }}</span>
                        </p>
                        <p class="content-item">
                            <span class="item-label">隐患地点：</span>
                            <span class="item-value">{{ item.location }}</span>
                        </p>
                        <p class="content-item">
                            <span class="item-label">隐患描述：</span>
                            <span class="item-value">{{ item.description }}</span>
                        </p>

                        <!-- 新增反馈状态字段 -->
                        <p class="content-item" v-if="item.tishi">
                            <span class="item-label">反馈状态：</span>
                            <span class="item-value feedback-status">{{ item.tishi }}</span>
                        </p>

                        <!-- 图片预览 -->
                        <div class="image-preview">
                            <div v-for="(img, idx) in (item.images && item.images.length ? item.images : [])"
                                 :key="idx"
                                 class="preview-item">
                                <el-image
                                    :src="img"
                                    fit="cover"
                                    :preview-src-list="item.images"
                                    class="preview-image">
                                    <template #error>
                                        <div class="placeholder-img">图片加载失败</div>
                                    </template>
                                </el-image>
                            </div>
                            <div v-if="!item.images || item.images.length === 0" class="preview-item">
                                <div class="placeholder-img">暂无图片</div>
                            </div>
                        </div>

                        <!-- 处理后图片预览（仅状态为待验证时显示） -->
                        <div class="process-images" v-if="item.status === '2' && item.processImages && item.processImages.length > 0">
                            <p class="process-title">处理后图片：</p>
                            <div class="image-preview">
                                <div v-for="(img, idx) in item.processImages"
                                     :key="idx"
                                     class="preview-item">
                                    <el-image
                                        :src="img"
                                        fit="cover"
                                        :preview-src-list="item.processImages"
                                        class="preview-image">
                                        <template #error>
                                            <div class="placeholder-img">图片加载失败</div>
                                        </template>
                                    </el-image>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 卡片底部 -->
                    <div class="card-footer">
                        <div class="status-info">
                            <span class="level-tag">
                                <i class="el-icon-warning"></i>
                                隐患级别：{{ item.level || '未设置' }}
                            </span>
                            <span class="handle-status">
                                <i class="el-icon-loading"></i>
                                处理状态：{{ statusText(String(item.handleStatus)) }}
                            </span>
                        </div>
                        <div class="action-buttons">
                            <!-- 根据状态显示不同按钮 -->
                            <template v-if="item.status === '0'">
                                <el-button type="primary" size="small" class="action-button" @click="openAuditDialog(item)">审核</el-button>
                                <el-button type="primary" size="small" class="action-button detail-btn">查看详情</el-button>
                                <el-button type="danger" size="small" class="action-button" @click="deleteItem(item.id)">删除</el-button>
                            </template>
                            <template v-else-if="item.status === '1'">
                                <el-button type="primary" size="small" class="action-button">上报结果</el-button>
                                <el-button type="primary" size="small" class="action-button detail-btn">查看详情</el-button>
                            </template>
                            <template v-else-if="item.status === '2'">
                                <el-button type="primary" size="small" class="action-button" @click="openVerifyDialog(item)">验证</el-button>
                                <el-button type="primary" size="small" class="action-button detail-btn">查看详情</el-button>
                            </template>
                            <template v-else-if="item.status === '3'">
                                <el-button type="primary" size="small" class="action-button detail-btn">查看详情</el-button>
                                <el-button type="danger" size="small" class="action-button" @click="deleteItem(item.id)">删除</el-button>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    layout="prev, pager, next, jumper, sizes"
                    :page-sizes="[10, 20, 30, 50]"
                    :total="total"
                    :current-page.sync="currentPage"
                    :page-size.sync="pageSize"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange">
                </el-pagination>
            </div>

            <!-- 审核对话框 -->
            <el-dialog
                title="隐患审核"
                v-model="auditDialogVisible"
                width="600px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
            >
                <div class="audit-dialog-content">
                    <!-- 回显数据信息 -->
                    <div class="info-section">
                        <div class="info-item">
                            <span class="info-label">处理人：</span>
                            <span class="info-value">{{ currentItem.name || '未设置' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">隐患描述：</span>
                            <span class="info-value">{{ currentItem.description || '无描述' }}</span>
                        </div>

                        <!-- 隐患图片 -->
                        <div class="info-item">
                            <span class="info-label">隐患图片：</span>
                            <div class="image-gallery">
                                <div v-if="currentItem.images && currentItem.images.length > 0" class="gallery-images">
                                    <el-image
                                        v-for="(img, idx) in currentItem.images"
                                        :key="idx"
                                        :src="img"
                                        fit="cover"
                                        :preview-src-list="currentItem.images"
                                        class="gallery-image"
                                    >
                                        <template #error>
                                            <div class="img-error">图片加载失败</div>
                                        </template>
                                    </el-image>
                                </div>
                                <div v-else class="no-images">暂无图片</div>
                            </div>
                        </div>
                    </div>

                    <!-- 审核操作 -->
                    <div class="audit-section">
                        <div class="audit-option">
                            <span class="option-label">审核结果：</span>
                            <el-radio-group v-model="auditForm.result">
                                <el-radio :label="true">审核通过</el-radio>
                                <el-radio :label="false">审核不通过</el-radio>
                            </el-radio-group>
                        </div>

                        <!-- 审核失败原因 -->
                        <div class="audit-reason" v-if="auditForm.result === false">
                            <span class="option-label">审核失败原因：</span>
                            <el-input
                                type="textarea"
                                v-model="auditForm.reason"
                                :rows="3"
                                placeholder="请输入审核失败的原因"
                            ></el-input>
                        </div>
                    </div>
                </div>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="auditDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitAudit">确认</el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- 验证对话框 -->
            <el-dialog
                title="隐患验证"
                v-model="verifyDialogVisible"
                width="700px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
            >
                <div class="verify-dialog-content">
                    <!-- 回显数据信息 -->
                    <div class="info-section">
                        <div class="info-item">
                            <span class="info-label">隐患描述：</span>
                            <span class="info-value">{{ currentItem.description || '无描述' }}</span>
                        </div>

                        <!-- 上报图片和处理后图片对比 -->
                        <div class="image-comparison">
                            <div class="image-column">
                                <div class="column-title">上报图片：</div>
                                <div class="gallery-container">
                                    <div v-if="currentItem.images && currentItem.images.length > 0" class="gallery-images">
                                        <el-image
                                            v-for="(img, idx) in currentItem.images"
                                            :key="idx"
                                            :src="img"
                                            fit="cover"
                                            :preview-src-list="currentItem.images"
                                            class="gallery-image"
                                        >
                                            <template #error>
                                                <div class="img-error">图片加载失败</div>
                                            </template>
                                        </el-image>
                                    </div>
                                    <div v-else class="no-images">暂无上报图片</div>
                                </div>
                            </div>

                            <div class="image-column">
                                <div class="column-title">处理后图片：</div>
                                <div class="gallery-container">
                                    <div v-if="currentItem.processImages && currentItem.processImages.length > 0" class="gallery-images">
                                        <el-image
                                            v-for="(img, idx) in currentItem.processImages"
                                            :key="idx"
                                            :src="img"
                                            fit="cover"
                                            :preview-src-list="currentItem.processImages"
                                            class="gallery-image"
                                        >
                                            <template #error>
                                                <div class="img-error">图片加载失败</div>
                                            </template>
                                        </el-image>
                                    </div>
                                    <div v-else class="no-images">暂无处理后图片</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 验证操作 -->
                    <div class="verify-section">
                        <div class="verify-option">
                            <span class="option-label">验证结果：</span>
                            <el-radio-group v-model="verifyForm.result">
                                <el-radio :label="true">验证完成</el-radio>
                                <el-radio :label="false">验证有异议</el-radio>
                            </el-radio-group>
                        </div>

                        <!-- 验证异议反馈 -->
                        <div class="verify-feedback" v-if="verifyForm.result === false">
                            <span class="option-label">反馈意见：</span>
                            <el-input
                                type="textarea"
                                v-model="verifyForm.feedback"
                                :rows="3"
                                placeholder="请输入验证异议的反馈意见"
                            ></el-input>
                        </div>
                    </div>
                </div>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="verifyDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitVerify">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { getDangerList, deleteDangerById, auditDanger } from '@/api/danger'
import { ElMessage, ElMessageBox } from 'element-plus'

// 标签页数据
const tabs = [
    { label: '全部隐患', value: 'all' },
    { label: '待审核', value: '0' },
    { label: '待处理', value: '1' },
    { label: '待验证', value: '2' },
    { label: '已完成', value: '3' },
    { label: '我的', value: 'mine' }
]
const activeTab = ref('all')

// 分页数据
const total = ref(3)  // 测试数据的总数
const currentPage = ref(1)
const pageSize = ref(10)

// 测试数据
const testData = [
    {
        id: 1,
        name: '王五',
        status: '0',
        handleStatus: '0',
        startTime: '2025-05-01 02:00:00',
        endTime: '',
        type: '校园三防建设',
        location: '仓库1层东侧消防器材区',
        description: '仓库灭火器过期未更换，存在消防隐患',
        images: [],
        level: '1',
        tishi: '',
        processImages: []
    },
    {
        id: 2,
        name: '赵六',
        status: '0',
        handleStatus: '0',
        startTime: '2025-05-02 06:30:00',
        endTime: '',
        type: '电气安全',
        location: '车间3号设备作业区',
        description: '车间3号设备旁电线外露，易引发触电事故',
        images: [],
        level: '2',
        tishi: '',
        processImages: []
    },
    {
        id: 3,
        name: '李四',
        status: '0',
        handleStatus: '0',
        startTime: '2025-05-03 01:15:00',
        endTime: '',
        type: '其他',
        location: '办公楼2层楼梯通道',
        description: '办公楼2楼楼梯扶手松动，易导致人员摔倒',
        images: [],
        level: '3',
        tishi: '',
        processImages: []
    }
]

// 筛选条件模型
const filters = reactive({
    status: '',
    level: '',
    source: '',
    type: '',
    reporter: '',
    startDate: null,
    endDate: null,
    securityId: '',
    startEndDate: null,
    endEndDate: null
})

// 下拉选项
const options = {
    status: [
        { label: '待审核', value: '0' },
        { label: '待处理', value: '1' },
        { label: '待验证', value: '2' },
        { label: '已完成', value: '3' }
    ],
    level: [
        { label: '一级', value: '1' },
        { label: '二级', value: '2' },
        { label: '三级', value: '3' }
    ],
    source: [
        { label: '校园建设', value: '1' },
        { label: '日常巡查', value: '2' }
    ],
    type: [
        { label: '校园三防建设', value: '1' },
        { label: '消防安全', value: '2' },
        { label: '电气安全', value: '3' },
        { label: '其他', value: '4' }
    ]
}

// 列表数据
const list = ref(testData)

// 状态文字
const statusText = (status: string) => {
    switch (status) {
        case '0': return '待审核'
        case '1': return '待处理'
        case '2': return '待验证'
        case '3': return '已完成'
        default: return '未知'
    }
}

// 获取隐患类型名称
// const getHazardTypeName = (typeId: string) => {
//     const type = options.type.find(item => item.value === typeId)
//     return type ? type.label : '未知类型'
// }

// 格式化时间
const formatTime = (time: string) => {
    if (!time) return '-'
    return time.replace('T', ' ').substring(0, 16)
}

// 处理标签页切换
const handleTabChange = (tabValue: string) => {
    activeTab.value = tabValue

    // 根据标签切换过滤数据
    fetchList()
}

// 获取列表数据
const fetchList = async () => {
    try {
        // 构造请求参数
        const params = {
            ...filters,
            current: currentPage.value,
            size: pageSize.value
        }

        // 根据标签页筛选状态
        if (activeTab.value !== 'all' && activeTab.value !== 'mine') {
            params.status = activeTab.value
        }

        console.log('发送请求参数:', params)

        // 调用API接口
        const response: any = await getDangerList(params) // 使用any类型避免TS错误
        console.log('接口返回数据:', response)

        // 获取正确的数据结构 - axios返回的响应对象中，数据在response.data中
        const res = response.data

        // 处理接口返回的数据
        if (res && res.code === 200 && res.data) {
            const records = res.data.records || []
            console.log('后端返回记录数:', records.length)

            if (records.length > 0) {
                // 映射后端数据到前端展示
                list.value = records.map((item: any) => ({
                    id: item.id,
                    name: item.handler || '未知',
                    status: item.status !== undefined ? String(item.status) : '0',
                    handleStatus: item.status !== undefined ? String(item.status) : '0',
                    startTime: item.discoveryTime || '',
                    endTime: item.endTime || '',
                    type: item.typeName,
                    location: item.hazardLocation || '未知位置',
                    description: item.hazardDesc || '无描述',
                    images: item.imagePaths || [], // 映射后端的图片路径数组
                    level: item.hazardLevel ? String(item.hazardLevel) : '未设置',
                    securityId: item.securityId,
                    tishi: item.tishi || '', // 添加反馈状态字段
                    processImages: item.processImages || [] // 处理后图片
                }))

                // 设置总记录数用于分页
                total.value = res.data.total !== undefined ? res.data.total : records.length
                console.log('数据加载成功，总记录数:', total.value)
            } else {
                console.log('后端返回空数据')
                list.value = []
                total.value = 0
            }
        } else {
            // 接口调用失败或返回错误
            console.error('接口返回错误:', res)
            list.value = []
            total.value = 0
        }
    } catch (error) {
        console.error('获取数据异常:', error)
        list.value = []
        total.value = 0
    }
}

// 搜索
const search = () => {
    fetchList()
}

// 重置
const reset = () => {
    filters.status = ''
    filters.level = ''
    filters.source = ''
    filters.type = ''
    filters.reporter = ''
    filters.startDate = null
    filters.endDate = null
    filters.securityId = ''
    filters.startEndDate = null
    filters.endEndDate = null

    fetchList()
}

// 上报隐患
const addItem = () => {
    console.log('上报隐患')
}

// 分页事件处理
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    fetchList()
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    fetchList()
}

// 删除隐患
const deleteItem = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除这条隐患记录吗？删除后无法恢复。',
        '删除提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(async () => {
        try {
            const response: any = await deleteDangerById(id)
            const res = response.data

            if (res && res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                    duration: 1500
                })

                // 刷新当前页面数据
                // 如果当前页只有一条数据且不是第一页，则返回上一页
                if (list.value.length === 1 && currentPage.value > 1) {
                    currentPage.value--
                }

                // 重新获取列表数据
                setTimeout(() => {
                    fetchList()
                }, 300)
            } else {
                ElMessage({
                    type: 'error',
                    message: res.message || '删除失败',
                })
            }
        } catch (error) {
            console.error('删除出错:', error)
            ElMessage({
                type: 'error',
                message: '删除请求异常',
            })
        }
    })
    .catch(() => {
        // 取消删除操作
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}

// 审核对话框相关
const auditDialogVisible = ref(false)
const currentItem = ref<any>({})
const auditForm = reactive({
    result: true,
    reason: ''
})

const openAuditDialog = (item: any) => {
    currentItem.value = item
    auditDialogVisible.value = true
}

const submitAudit = async () => {
    try {
        // 显示加载状态
        const loading = ElMessage({
            message: '正在提交审核结果...',
            type: 'info',
            duration: 0
        })

        // 准备审核数据
        const auditData = {
            id: currentItem.value.id,
            status: auditForm.result ? '1' : '0', // 通过状态改为待处理(1)，不通过保持待审核(0)
            auditResult: auditForm.result ? 1 : 0, // 1表示通过，0表示不通过
            tishi: auditForm.result ? '' : auditForm.reason, // 审核失败原因
            auditTime: new Date().getTime() // 审核时间戳
        }

        // 调用审核API
        const response: any = await auditDanger(auditData)

        // 关闭加载提示
        loading.close()

        // 处理响应结果
        if (response && response.data && response.data.code === 200) {
            ElMessage({
                type: 'success',
                message: auditForm.result ? '审核通过成功' : '审核未通过',
                duration: 1500
            })

            // 关闭对话框
            auditDialogVisible.value = false

            // 重置表单
            auditForm.result = true
            auditForm.reason = ''

            // 刷新列表数据
            setTimeout(() => {
                fetchList()
            }, 500)
        } else {
            // 处理错误
            throw new Error(response?.data?.message || '审核提交失败')
        }
    } catch (error: any) {
        console.error('审核提交错误:', error)
        ElMessage({
            type: 'error',
            message: `审核提交失败: ${error.message || '未知错误'}`,
            duration: 3000
        })
    }
}

// 验证对话框相关
const verifyDialogVisible = ref(false)
const verifyForm = reactive({
    result: true,
    feedback: ''
})

const openVerifyDialog = (item: any) => {
    currentItem.value = item
    verifyDialogVisible.value = true
}

const submitVerify = async () => {
    try {
        // 显示加载状态
        const loading = ElMessage({
            message: '正在提交验证结果...',
            type: 'info',
            duration: 0
        })

        // 准备验证数据
        const verifyData = {
            id: currentItem.value.id,
            status: verifyForm.result ? '3' : '1', // 验证完成改为已完成(3)，有异议改为待处理(1)
            tishi: verifyForm.result ? '' : verifyForm.feedback, // 异议反馈
            verifyTime: new Date().getTime() // 验证时间戳
        }

        // 调用API - 这里假设复用审核API或创建新的验证API
        const response: any = await auditDanger(verifyData)

        // 关闭加载提示
        loading.close()

        // 处理响应结果
        if (response && response.data && response.data.code === 200) {
            ElMessage({
                type: 'success',
                message: verifyForm.result ? '验证完成' : '已提交异议反馈',
                duration: 1500
            })

            // 关闭对话框
            verifyDialogVisible.value = false

            // 重置表单
            verifyForm.result = true
            verifyForm.feedback = ''

            // 刷新列表数据
            setTimeout(() => {
                fetchList()
            }, 500)
        } else {
            // 处理错误
            throw new Error(response?.data?.message || '验证提交失败')
        }
    } catch (error: any) {
        console.error('验证提交错误:', error)
        ElMessage({
            type: 'error',
            message: `验证提交失败: ${error.message || '未知错误'}`,
            duration: 3000
        })
    }
}

// 页面加载初始化
onMounted(() => {
    fetchList()
})
</script>

<style scoped>
.danger-page {
    padding: 16px;
    background: #f5f7fa;
    height: 100vh;
    overflow-y: auto;
}

.breadcrumb {
    margin-bottom: 16px;
}

/* 自定义选项卡样式 */
.custom-tabs {
    display: flex;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 20px;
    background: #fff;
}

.tab-item {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    border-right: 1px solid #e4e7ed;
}

.tab-item.active {
    background-color: #409eff;
    color: #fff;
}

/* 筛选区域 */
.filter-container {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

.filter-select, .filter-input {
    width: 200px;
}

.action-bar {
    margin: 16px 0;
}

.action-btn {
    margin-right: 12px;
}

.result-summary {
    background: #e1f3ff;
    padding: 12px;
    border-radius: 4px;
    color: #606266;
    margin-bottom: 16px;
}

/* 隐患卡片样式 */
.hazard-list {
    margin-bottom: 20px;
}

.hazard-card {
    background: #fff;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-avatar {
    margin-right: 8px;
}

.user-name {
    font-weight: bold;
    margin-right: 12px;
}

.status-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
}

.status-0 {
    background-color: #f0ad4e;
}

.status-1 {
    background-color: #5bc0de;
}

.status-2 {
    background-color: #5cb85c;
}

.status-3 {
    background-color: #777;
}

.time-info {
    color: #999;
}

.time-item {
    margin-left: 16px;
}

.card-content {
    padding: 12px 0;
}

.content-item {
    margin: 8px 0;
    line-height: 1.5;
}

.item-label {
    color: #666;
}

.hazard-type {
    color: #409eff;
    font-weight: bold;
}

.image-preview {
    display: flex;
    margin-top: 12px;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item {
    width: 80px;
    height: 80px;
    margin-right: 12px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e7ed;
    overflow: hidden;
    border-radius: 4px;
}

.placeholder-img {
    color: #999;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.status-info {
    display: flex;
}

.level-tag {
    margin-right: 20px;
    color: #e6a23c;
}

.handle-status {
    color: #f56c6c;
}

.action-buttons {
    display: flex;
}

.action-button {
    margin-left: 8px;
}

.detail-btn {
    background: transparent;
    color: #409eff;
    border-color: transparent;
}

/* 分页样式 */
.pagination-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

/* 审核对话框样式 */
.audit-dialog-content {
    padding: 20px;
}

.info-section {
    margin-bottom: 20px;
}

.info-item {
    margin-bottom: 10px;
}

.info-label {
    font-weight: bold;
}

.info-value {
    margin-left: 10px;
}

.image-gallery {
    margin-top: 10px;
}

.gallery-images {
    display: flex;
    flex-wrap: wrap;
}

.gallery-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    object-fit: cover;
}

.img-error {
    color: #f56c6c;
}

.no-images {
    color: #999;
}

.audit-section {
    margin-top: 20px;
}

.audit-option {
    margin-bottom: 10px;
}

.option-label {
    margin-right: 10px;
}

.audit-reason {
    margin-top: 10px;
}

.dialog-footer {
    text-align: right;
}

.feedback-status {
    color: #E6A23C;
    font-weight: bold;
}

.process-images {
    margin-top: 15px;
}

.process-title {
    font-weight: bold;
    color: #409EFF;
    margin-bottom: 8px;
}

/* 验证对话框样式 */
.verify-dialog-content {
    padding: 20px;
}

.image-comparison {
    display: flex;
    margin-top: 15px;
    gap: 20px;
}

.image-column {
    flex: 1;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    padding: 10px;
}

.column-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #606266;
    text-align: center;
}

.gallery-container {
    min-height: 150px;
}

.verify-section {
    margin-top: 20px;
    border-top: 1px dashed #EBEEF5;
    padding-top: 20px;
}

.verify-option {
    margin-bottom: 15px;
}

.verify-feedback {
    margin-top: 15px;
}
</style>
